<template>
  <div :class="{checkblock:true,isActive:state}" @touchend="handleClick">
    <div class="checkblock-icon">
      <img :src="icon">
    </div>
    <div class="checkblock-title"><span>{{title}}</span></div>
    <div class="checkblock-block"></div>
    <slot>
      
    </slot>
  </div>
</template>
<script>
export default{
  props:['title','icon'],
  inject:['checked','handleChecked'],
  mounted(){
    this.state = this.checked.value.indexOf(this.title) != -1;
  },
  data(){
    return {
      state:false
    }
  },
  methods:{
    handleClick(){
      this.state = !this.state;
      if(this.state){
        this.handleChecked([...this.checked.value,this.title])
      }else{
        let arrs = [...this.checked.value];
        arrs.splice(this.checked.value.indexOf(this.title),1);
        this.handleChecked(arrs)
      }
    }
  }
}
</script>
<style lang="less">
.checkblock{
  padding: .625rem;
  height: 9.375rem;
  display: flex;
  background: #9999;
  position: relative;
  .checkblock-icon{
    flex: 1;
    box-sizing: border-box;
    transition-duration: .5s;
    transition-property: border;
    position: relative;
    >img{
      height: 100%;
    }
  }
  .checkblock-title{
    flex: 1;
    line-height: 9.375rem;
    font-size: 50px;
    color: #ffff;
    text-shadow: 2px 2px 2px #9999;
  }
  .checkblock-block{
    position: absolute;
    z-index: -11;
    right: 0;
    top: 0;
    width: 20%;
    height: 100%;
    background: orange;
    transition-duration: .5s;
    transition-property: width,background;
    &::after{
      content: "√";
      font-size: 100px;
      color: darkcyan;
      text-align: center;
      line-height: 9.375rem;
      position: absolute;
      right:0;
      top: 0;
      width: 0%;
      height: 100%;
      background: yellow;
      transition-duration: 1s;
      transition-property: width,font-size;
      overflow: hidden;
    }
  }
  &::before{
    content: "";
    width: 0%;
    height: 100%;
    background: #9999;
    transition-duration: .5s;
    transition-property: width,background;
  }
}
.isActive{
  &::before{
    content: "";
    width: 10%;
    height: 100%;
    background: #fff;
    transition-duration: 1s;
    transition-property: width,background;
  }
  .checkblock-block{
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: greenyellow;
    &::after{
      content: "√";
      font-size: 100px;
      color: darkcyan;
      text-align: center;
      line-height: 9.375rem;
      z-index: 11111;
      position: absolute;
      right:0;
      top: 0;
      width: 20%;
      height: 100%;
      background: yellow;
    }
  }
}
</style>